import { useAppDispatch, useAppSelector } from '@/app/hooks'
import { useState } from 'react'
import { decrement, increment, incrementAsync, selectCount } from './slice'

export default function CounterUpdate() {
  const [num, setNum] = useState(1)
  // const count = useSelector((state: RootState) => state.counter.count)
  // const dispatch: AppDispatch = useDispatch()
  const count = useAppSelector(selectCount)
  const dispatch = useAppDispatch()

  return (
    <div>
      
      <select value={num} onChange={e => setNum(+e.target.value)}>  {/* * +保证num是数值 */}
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button onClick={()=> dispatch(increment(num))}>增加</button>
      <button onClick={()=> dispatch(decrement(num))}>减少</button>
      <button onClick={() => count%2===1 && dispatch(increment(num))}>奇数增加</button>
      <button onClick={() => dispatch(incrementAsync(num))}>延迟1S增加</button>
    </div>
  )
}
